<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHeader @add="handleAdd"></TodoHeader>
    <TodoMain @del="handleDel" :list="list"></TodoMain>
    <Todofooter @clear="handleClear" :list="list"></Todofooter>
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import Todofooter from './components/Todofooter.vue'


export default {
  data() {
      return {
        list: JSON.parse(localStorage.getItem('list')) || [
          { id:1, name:'踢球'},
          { id:2, name:'看电影'},
          { id:3, name:'吃饭'},
        ]
      }
    },
    methods: {
      handleAdd(todoName){
        this.list.unshift({
          id: +new Date(),
          name: todoName 
        })
      },
      handleDel(id){
        this.list = this.list.filter(item => item.id !== id)
      },
      handleClear(){
        this.list = []
      }

    },
    watch: {
      list: {
        deep:true,
        handler(newValue){
          localStorage.setItem('list',JSON.stringify(newValue))
        }
      }
    },
    components:{
      TodoHeader,
      TodoMain,
      Todofooter
    }
}
</script>

<style>

</style>

